<?php
	if(!isset($_REQUEST['ajax'])){ $_REQUEST['ajax'] = "";}
	if($_REQUEST['ajax']!=true) include 'header.tpl.php';
	include 'report_panel.tpl.php';
?>
	<div class="row">
		<div class="col-lg-12">
			<div class="panel">
				<div class="panel-heading">
					<div class="panel-title"><i class="icon-bar-chart"></i> <?php echo $this->language['report'];?></div>
				</div>
				<div class="panel-body">
					<form action="javascript:doReport();" class="form-horizontal">
						<div class="form-group">
							<label class="control-label col-lg-2"><?php echo $this->language['report_type'];?></label>
							<div class="col-lg-10">
								<select class="form-control control-inline" name="reportType" id="reportType">
									<?php if(is_root()){ ?>
									<option value='1'><?php echo $this->language['report_all'];?></option>
									<?php } ?>
									<option value='2'><?php echo $this->language['departments'];?></option>
									<option value='3'><?php echo $this->language['employees'];?></option>
								</select>
								<select name="reportTarget" id="reportTarget" class="form-control control-inline"><?php echo $this->reportTarget;?></select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-lg-2"><?php echo $this->language['report_time'];?></label>
							<div class="col-lg-10">
								<select id="reportYear" class="form-control control-inline">
									<?php
										if(isset($this->years)){
											foreach($this->years as $year){
												echo '<option value="'.$year.'">'.$year.'</option>';
											}
										}
									?>
								</select>
								<select id="reportMonth" class="form-control control-inline">
									<option value=''>-----</option>
									<option value='1'>Tháng 1</option>
									<option value='2'>Tháng 2</option>
									<option value='3'>Tháng 3</option>
									<option value='4'>Tháng 4</option>
									<option value='5'>Tháng 5</option>
									<option value='6'>Tháng 6</option>
									<option value='7'>Tháng 7</option>
									<option value='8'>Tháng 8</option>
									<option value='9'>Tháng 9</option>
									<option value='10'>Tháng 10</option>
									<option value='11'>Tháng 11</option>
									<option value='12'>Tháng 12</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-lg-offset-2 col-lg-10">
								<button class="btn btn-primary" type="submit"><?php echo $this->language['report'];?></button>
							</div>
						</div>
					</form>
					<div id="charts" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$("#reportType").change(function(){
				if($(this).val()==1){
					$("#reportTarget").html('<option>-------------</option>');
				}
				else if($(this).val()==2){
					$("#reportTarget").html('');
					$.getJSON("?func=report_ajax",{type: $(this).val()}, function(j){
						var options = '';
						for (var i = 0; i < j.length; i++) {
							options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
						}
						$("#reportTarget").html(options);
					});
				}
				else if($(this).val()==3){
					$("#reportTarget").html('');
					$.getJSON("?func=report_ajax",{type: $(this).val()}, function(data){
						var selectm = $('#reportTarget');
						$.each(data, function (key, cat) {
							var group = $('<optgroup>',{label:key});
							$.each(cat,function(i,item) {
								$("<option/>",{value:item.optval,text:item.optdis}).appendTo(group);
							});
							group.appendTo( selectm );
						});
					});
				}
			})
		});
		
		$(function () {
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					colors: ['#E43B3B', '#F58119', '#52BF43', '#24CBE5', '#3673FE', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
					chart: {
						renderTo: 'charts',
						type: 'column'
					},
					title: {
						text: '<?php echo $this->text;?>'
					},
					subtitle: {
						text: '<?php echo $this->reportTime;?>'
					},
					xAxis: {
						categories: <?php echo $this->categories;?>
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Số lượng Công việc'
						}
					},
					legend: {
						layout: 'vertical',
						backgroundColor: '#FFFFFF',
						align: 'left',
						verticalAlign: 'top',
						x: 100,
						y: 70,
						floating: true,
						shadow: true
					},
					tooltip: {
						formatter: function() {
							return ''+
								this.x +': '+ this.y +' cv';
						}
					},
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						}
					},
					series: [
						{
							name: 'Công việc Quá hạn',
							data: <?php echo $this->cvqh;?>
						}, 
						{
							name: 'Công việc Đang chờ',
							data: <?php echo $this->cvdc;?>
						}, 
						{
							name: 'Công việc Đang xử lý',
							data: <?php echo $this->cvdxl;?>
						}, 
						{
							name: 'Công việc Chờ xác nhận',
							data: <?php echo $this->cvcxn;?>
						},
						{
							name: 'Công việc Hoàn thành',
							data: <?php echo $this->cvht;?>
						}
					]
				});
			});
			
		});
	</script>
<?php if(isset($this->breadcrumb) && isset($this->title_header)):?>
	<script type="text/javascript">
		$(function() {
			$("#title-header").text('<?php echo $this->title_header;?>');
			$("#breadcrumb").html('<?php echo build_breadcrumb($this->breadcrumb);?>');
		});
	</script>
<?php endif;?>
<?php
	if($_REQUEST['ajax']!=true) include 'footer.tpl.php';
?>